<template>
    <div>
        <!-- 头部导航，可以回到首页 -->
        <div class="search-nav">
            <div 
                class="btn-index"
                @click="goIndex">
                <i class="fa fa-desktop" aria-hidden="true"></i> 返回首页
            </div>
            <div class="title">推荐</div>
        </div>
        <rankItem   
            v-for="item,index in rank_data"
            :key="'78787787878'+ index"
            :itemData='item'>   
        </rankItem>
        <div @click="addItem" class="btn-add-item" v-if="rank_now < rank_num">加载更多</div>
    </div>
</template>

<script>
import rankItem from "@/components/rankItem.vue"
export default {
    name: 'recommend',
    components: {
        rankItem
    },
    data() {
        return {
            rank_data: [], // 放排行的item
            rank_num: 3, //可以请求加进rank_data数组的次数
            rank_now: 0, //现在请求了rank_data数组的次数
        }
    },
    created() {
        this.addItem();
    },
    methods: {
        // 增加排行的item
        addItem() {
            if(this.rank_now < this.rank_num) {
                this.$axios.get('./static/myRank' + this.rank_now + '.json').then(response => {
                    let arr = response.data.ranklist;
                    arr.forEach((item,index)=> {
                        item.id = Symbol();
                        item.No = this.rank_now*10 + index +1;
                    })
                    this.rank_data.push(arr);
                    // console.log(this.rank_data);
                    this.rank_now ++;
                }, response => {
                    // console.log("error");
                    alert('网络请求错误')
                });
                
            }
        },
        goIndex() {
            this.$router.push('/')
        }
    }
}
</script>

<style lang="scss" scoped>
.search-nav {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    position: relative;
    background-color: #333;
    .title {
        width: 100%;
        font-size: 20px;
        color: white;
    }
    .btn-index {
        color: #ccc;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}
.btn-add-item {
    width: 90%;
    margin: 10px auto;
    border: 1px #ccc solid; 
    background-color: #f2f2f2;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
}
</style>